<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui-win.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css" />
		<style type="text/css">
			.my-header {
				background: url('../../image/bg.jpg') no-repeat;
				background-size: cover;
				min-height: 220px;
				position: relative;
			}
			.my-info {
				position: relative;
				padding: 20px 0;
				width: 100%;
				bottom: 0;
				text-align: center;
				vertical-align: center;
			}
			.my-info img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
			.my-info p.nickname {
				margin-top: 5px;
				color: #ffffff;
				font-size: 18px;
			}
			.my-menu {
				position: absolute;
				width: 100%;
				height: 45px;
				line-height: 45px;
				left: 0;
				bottom: 0;
				text-align: center;
				background: #ffffff;
				filter: Alpha(opacity=50);
				background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0 !important;
				color: #ffffff;
				font-size: 14px;
			}
			.my-menu .aui-col-xs-3 {
				border-right: 1px solid #9bd6d5;
			}
			.my-menu .aui-col-xs-3:last-child {
				border-right: none;
			}
			.my-menu > div:active {
				background: #ffffff;
				filter: Alpha(opacity=50);
				background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0 !important;
			}
			.aui-list-view-cell {
				line-height: 26px;
			}
			.display-none {
				display: none;
			}
			#aui-footer .aui-iconfont {
				font-size: 25px;
			}
			#aui-footer {
				background: #f7f7f7;
				border-top: 1px solid #e2e2e2;
			}
			.aui-bar-1d9dd5 {
				background: #1d9dd5;
			}
			#aui-footer li.active-1d9dd5, #aui-footer li.active-1d9dd5 span.iconfont {
				color: #1d9dd5 !important;
			}
			.brige {
				display: inline-block;
				position: absolute;
				top: 0;
				right: 30%;
				z-index: 100;
				background: #EF9300;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				font-size: 11px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				min-width: 16px;
				color: #fff;
				font-style: normal;
			}
		</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav header aui-bar-1d9dd5" id='contact-header'>
			<a class="aui-pull-left" tapmode  onclick="H.$closeCurrentWin();"> <span class="aui-iconfont aui-icon-left"></span>返回 </a>
			<div class="aui-title">
				通讯录
			</div>
		</header>
		<header class="aui-bar aui-bar-nav header aui-bar-1d9dd5 display-none" id='bbs-header'>
			<a class="aui-pull-left" tapmode  onclick="H.$closeCurrentWin();"> <span class="aui-iconfont aui-icon-left"></span>返回 </a>
			<div class="aui-title">
				发现
			</div>
		</header>
		<footer class="aui-nav" id="aui-footer">
			<ul class="aui-bar-tab">
				<li class="active-1d9dd5" tapmode  data-header="contact-header" data-frameName="contact">
					<span class="aui-iconfont iconfont icon-tongxunlu"></span>
					<p>
						通讯录
					</p>
					<em class="brige">9</em>
				</li>
				<li data-header="bbs-header" tapmode  data-frameName="bbs">
					<span class="aui-iconfont iconfont icon-iconfontfaxianweixuanzhong"></span>
					<p>
						发现
					</p>
				</li>
				<li data-header="setting-header" tapmode  data-frameName="setting">
					<span class="aui-iconfont iconfont icon-shezhi"></span>
					<p>
						设置
					</p>
				</li>
			</ul>
		</footer>
	</body>
	<script type="text/javascript" src="../../script/AHelper.js"></script>
	<script type="text/javascript" src="../../script/zepto.min.js"></script>
	<script type="text/javascript">
		var frames = [];
		// 显示指定frame
		function showFrame(frameName) {
			$("#aui-footer li").each(function() {
				var fName = $(this).attr("data-frameName");
				if (fName != frameName) {
					H.$setFrameStatus(fName, true);
					H.$setFrameStatus("setting_head", true);
					H.$setFrameStatus("setting_body", true);
				} else {
					if (fName == "setting") {
						H.$setFrameStatus("setting_head", false);
						H.$setFrameStatus("setting_body", false);
					} else {
						H.$setFrameStatus(fName, false);
					}
				}
			});
		}

		Zepto(function($) {
			$("#aui-footer").on("tap", "li", function() {
				var that = $(this);
				var headerId = that.attr("data-header");
				var frameName = that.attr("data-frameName");
				that.addClass("active-1d9dd5").siblings("#aui-footer li").removeClass("active-1d9dd5");
				$("#" + headerId).removeClass("display-none").siblings(".header").addClass("display-none");
				showFrame(frameName);
				if (frames.indexOf(frameName) == -1) {
					frames.push(frameName);
					if (frameName != "setting") {
						// 打开新的frame
						H.$openFrameWithNav(headerId, {
							url : frameName + "_body.html",
							name : frameName,
							bounces : true
						}, 'aui-footer');
					} else {
						H.$openFrame(frameName, frameName + '.html', null, {
							x : 0,
							y : 0,
							w : api.winWidth,
							h : api.winHeight - H.$api.offset(H.$api.byId('aui-footer')).h
						});
					}
				}
			});
		});
		H.ready(function() {
			frames.push('contact');
			// 打开新的frame
			H.$openFrameWithNav('contact-header', {
				url : 'contact' + "_body.html",
				name : 'contact',
				bounces : true
			}, 'aui-footer');
		});
	</script>
</html>